<template>
  <kb-scroll-view>
    <div>
      <h1>input props showFixedInput</h1>

      <h2>default false</h2>

      <kb-input
        v-model="mixValue"
        :inputProps="{
          placeholder: 'Any string',
        }"
      />

      <h2>true</h2>

      <kb-input
        v-model="mixValue"
        :inputProps="{
          placeholder: 'Any string',
          showFixedInput: true,
        }"
      >
        <template v-slot:prepend>
          <span class="btn-dosomething">-</span>
        </template>
        <template v-slot:append>
          <span class="btn-dosomething">+</span>
        </template>
        <!-- fixed input slot -->
        <template v-slot:prependFixed>
          <span class="btn-dosomething">-</span>
        </template>
        <template v-slot:appendFixed>
          <span class="btn-dosomething">+</span>
        </template>
      </kb-input>
      <div style="height: 250px"></div>
      <p>多行，固定</p>
      <kb-input
        v-model="mixValuefixed"
        :inputProps="{
          height: '80px',
          placeholder: 'Any string',
          allowEnter: true,
          inputLang: 'en',
          showFixedInput: true,
        }"
      />
      <kb-board :emojiMap="emoji" />
    </div>
  </kb-scroll-view>
</template>

<script>
import { person, hearts, symbo } from "../dev/enumerate/emojiImages";
export default {
  name: "App",
  data() {
    return {
      emoji: {
        person,
        hearts,
        symbo,
      },
      mixValue: `hello,world!!`,
      mixValuefixed: `你好
      a
      
      呵呵
      
      (,,･∀･)ﾉ゛hello`,
    };
  },
  created() {
    console.log("this.slot", this.$slots);
  },
  methods: {
    submitFn(val) {
      console.log("input 的submit事件", val);
    },
    showStatus(data) {
      console.log("监听键盘显示隐藏", data);
    },
    inputFn({ el, value }) {
      console.log("input", el, value);
    },
    focusFn({ el, value }) {
      console.log("focus", el, value);
    },
    blurFn({ el, value }) {
      console.log("blur", el, value);
    },
  },
};
</script>

<style>
p {
  word-wrap: break-word;
  white-space: pre-wrap;
}
</style>
